<template>
  <!-- 自生成任务 -->
   <v-container>
    <v-row no-gutters class="d-flex flex-column mb6">
      <v-col cols="12">
        <div class="text-h5 text-center" v-text="title" ></div>
      </v-col>
      <br />
      <v-col cols="12" class="#fafafa" id="planList">
        <v-list>
          <v-list-item dense> 
            <v-row no-gutters>
              <v-col cols="2">
                <div class="text-subtitle-2 font-weight-bold">计划</div>
              </v-col>
              <v-col cols="2">
                <div class="text-subtitle-2 font-weight-bold">已开始</div>
              </v-col>
              <v-col cols="3">
                <div class="text-subtitle-2 font-weight-bold">周期</div>
              </v-col>
              <v-col cols="4" offset="1">
                <div class="text-subtitle-2 font-weight-bold">统计</div>
              </v-col>
            </v-row>
          </v-list-item>
          <v-list-item ripple v-for="(item, key) in taskdata" :key="key">
            <v-row no-gutters>
              <v-col cols="2">{{item.name}}</v-col>
              <v-col cols="2">{{startDay(item.starttime)}}</v-col>
              <v-col cols="3">{{item.period}}</v-col>
              <v-col cols="4" offset="1" id="sparkline">
                <v-sparkline
        :fill="false"
        :gradient="['#9c27b0']"
        :line-width="1"
        :padding="0"
        :smooth="true"
        :value="item.curve"
        :height="20"
        auto-draw
        auto-line-width
      ></v-sparkline>
              </v-col>
            </v-row>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
    <v-dialog
      v-model="dialog"
      persistent
      max-width="600px"
    >
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="primary"
       id="addbtn"
       elevation="2" 
       icon 
       outlined 
       v-bind="attrs"
       v-on="on" 
       >
        <v-icon >mdi-plus</v-icon>
      </v-btn>
    </template>
    <v-card>
      <v-card-title>
        新建任务
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12"  >
            <v-text-field v-model="form.name" dense label="计划名称" required ></v-text-field>
            <v-text-field v-model="form.period" dense label="执行周期" required ></v-text-field>
            <div style="text-align:center;">
              <v-date-picker v-model="form.starttime"></v-date-picker>
              <div class="text-h6">点击选择计划开始日期</div>
            </div>
          </v-col>
        </v-row>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
            color="blue darken-1"
            text
            @click="cancel"
          >
            取消
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="submit"
          >
            确定
          </v-btn>
      </v-card-actions>
    </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as Note from "@/foreground/note/note.js";
import {insertTask, allTask} from "@/dao/master/zsctask.js"

const dateDiffToday = function(d1) {
  let nd1, nds1,days
  nds1 = d1.split("-")
  if(nds1.length != 3) return ""
  nd1 = new Date(nds1[1]+"-"+nds1[2]+"-"+nds1[0])
  days = parseInt((new Date() - nd1) / 1000 / 60 / 60 / 24 ) 
  if(days < 0) { return (-1 * days) + "天后" }
  return days + "天"
}

export default {
  data() {
    return {
      title:"自生成任务",
      plan: [
      ],
      dialog:false,
      form:{
        name: "",
        starttime: "",
        period: ""
      },
      taskdata:[
        {
          name:"健身",
          starttime:"2021-08-08",
          period:"四天一次",
          curve:[.2, .4, .6, .8 ,1 ,.5, .4, .2, .4, .6, .8 ,1 ,.5, .4, .2, .4, .6, .8 ,1 ,.5, .4 ]
        }
      ]
    }
  },
  computed:{
  },
  methods: {
    addTask() {
      console.log("add task")
    },
    cancel() {
      this.dialog = false
    },
    submit() {
      console.log(this.form)
      if(this.form.name && this.form.starttime && this.form.period) {
          insertTask(this.form).then(()=>{
            this.taskdata.push(this.form)
            this.form = {}
            this.dialog = false
          }).catch((error)=>{
            console.log("创建任务失败：" + error)
          })
      }
    },
    // 计算今天距离时间点的天数
    startDay(time) {
      return dateDiffToday(time)
    },
  },
  async created() {
    await Note.initdb();
    let data = await allTask();
    if(data) this.taskdata = data 
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.v-list-item{
  border-bottom:1px solid #eee;
  font-size:14px;
}
#planList{
  text-align: center;
}
  #addbtn{
    left:50%;
    margin-left:-20px;
    margin-top:2rem;
    text-align:center;
  }
</style>
